<template>
    <bi-menu icon="fa fa-bars" title="应用" body-class="topbar-app" :body-width="bodyWidth" v-if="list.length>0">
        <bi-menu-item v-for="item in list" :key="item.name" class="app-item"  :icon="item.icon" :title="item.title" @click="handleClick(item)">
            <bi-picture :src="item.icon" class="app-icon" style="width: 80px; height: 80px;" ></bi-picture>
            <span class="app-title">{{item.title}}</span>
        </bi-menu-item>
    </bi-menu>
</template>


<script>
export default{
    data(){

        list = this.$user.getLocalStorage('appList')??[];
        let bodyWidth = 360;
        if (list.length<3){
            bodyWidth = 110*list.length + 20;
        }

        return {
            list,
            bodyWidth
        }
    },
    methods:{
        handleClick(item){
            if (item.admin_url) location.href = item.admin_url;
        }
    },
    mounted(){

    },
}
</script>

<style>
.topbar-app{
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 10px;
     
}
.topbar-app .app-item{
    text-align: center;
    width: 110px;
    padding: 5px 10px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;

}

.topbar-app .app-item .app-icon{
    width: 80px;
    height: 80px;
}

.topbar-app .app-item .app-title{
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}
</style>